<template>
  <div class="header">
    <div class="logo">
      <img class="logoShow" :src="logoSrc" alt="Product Logo" />
    </div>
    <div class="right-panel">
      <el-popover
          :width="800"
          trigger="click"
          :v-model:visible="true"
          :offset="20"
          transition="none"
          :hide-after="0"
          :popper-style="{padding : '0'}"
      >
        <template #reference>
          <span class="iconfont icon-transfer"></span>
        </template>
        <template #default>
          <Uploader/>
        </template>
      </el-popover>

      <el-dropdown>
        <div class="user-info">
          <div class="avatar" @click="navigateTo('/userInfo')">
            <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <span class="nick-name">{{userInfo.nickName}}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import router from "@/router/index.js";

// 导入图片
import logoImage from '@/assets/X-logo.png';
import Uploader from "@/components/Uploader.vue"; // 请将路径替换为你的图片路径

const logoSrc = logoImage;
const { proxy } = getCurrentInstance();

const navigateTo = path =>router.push(path);
const userInfo = ref({
  nickName:"张三",
});
</script>

<style scoped lang="scss">
.header{
  box-shadow: 0 3px 10px 0 rgb(0 0 0 / 6%);
  height:80px;
  padding-left: 24px;
  padding-right:24px;
  position:relative;
  z-index:200;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo{
    display: flex;
    align-items: center;
    .icon-pan{
      font-size:40px;
      color:#1296db;
    }
    .name{
      font-weight:bold;
      margin-left: 5px;
      font-size:25px;
      color:#05a1f5;
    }
  }
  .right-panel{
    display: flex;
    align-items: center;
    .icon-transfer{
      cursor:pointer;
    }
    .user-info{
      margin-right:20px;
      display: flex;
      align-items: center;
      cursor:pointer;
      .avatar{
        margin:0 5px 0 15px;
      }
      .nick-name{
        color:#05a1f5;
      }
    }
  }
}
.logoShow {
  max-width: 200px; /* 控制图片的最大宽度 */
  max-height: 80px; /* 控制图片的最大高度 */
}
</style>